<template>
	<view class="DistributionService" v-if="value" @click.prevent.stop @touchmove.stop.prevent="stopScrolling" @click="clsoePopup">
		<view class="DistributionService-main" @click.prevent.stop>
			<view
				class="DistributionService-main-content"
				:style="{
					backgroundImage: 'url(' + bgImageUrl + ')'
				}"
			>
				<image :src="serviceImageUrl" show-menu-by-longpress class="image" />

				<text class="text">请长按二维码添加客服</text>
			</view>
			<view class="DistributionService-main-close">
				<image @click.prevent.stop="clsoePopup" src="@/static/icon/icon_service_close.png" class="image" />
			</view>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';

const bgImageUrl = Object.freeze(`${defaultImageUrl}image/img_bg_service.png`);
const serviceImageUrl = Object.freeze(`${defaultImageUrl}service/q_r_code.png?v=${Date.now()}`);

export default {
	name: 'DistributionService',

	props: {
		value: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			bgImageUrl,
			serviceImageUrl
		};
	},

	methods: {
		// 阻止遮罩滚动穿透
		stopScrolling() {
			return;
		},

		clsoePopup() {
			this.$emit('input', false);
		}
	}
};
</script>

<style lang="scss" scoped>
.DistributionService {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999999;
	background: rgba(0, 0, 0, 0.6);

	&-main {
		position: fixed;
		top: 50%;
		left: 0;
		width: 100%;
		padding: 0 70rpx;
		transform: translateY(-60%);

		&-content {
			width: 100%;
			height: 778rpx;
			padding: 276rpx 94rpx 0;

			display: flex;
			text-align: center;
			flex-direction: column;

			background-repeat: no-repeat;
			background-size: contain;

			.image {
				width: 100%;
				height: 420rpx;
				border-radius: 12rpx;
			}

			.text {
				color: #666;
				font-size: 24rpx;
				margin-top: 24rpx;
			}
		}

		&-close {
			text-align: center;
			margin-top: 30rpx;

			.image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
}
</style>
